<template>
  <div class="about">
    <div class="site-content">
      <div class="content-warp">
       
    

        <div class="about-me about-info">
          <section-title id="Guestbook"><span>❤</span>给我留言</section-title>
          <div class="info-card">
            <div class="contactForm" :model="ruleForm" >
              <div class="form-item">
                <label for="mail">邮箱</label>
                <input
                  class="v"
                  type="email"
                  name="mail"
                  id="mail"
                  v-model="ruleForm.email"
                />
              </div>
               <div class="form-item">
                <label for="nickName">昵称</label>
                <input
                  class="v"
                  name="nickName"
                  id="nickName"
                  v-model="ruleForm.nickName"
                />
              </div>
              <div class="form-item">
                <label for="content">内容</label>
                <textarea
                  class="v_content"
                  id="content"
                  name="content"
                  v-model="ruleForm.content"
                ></textarea>
              </div>
              <div class="form-item">
                <label></label>
                <button @click="submitForm('ruleForm')">提交</button>
              </div>
            </div>
          </div>
        </div>

         <div class="about-me about-info">
          <section-title id="Guestbook"><span>❤</span>最新10条留言</section-title>
          <div class="info-card">
            <p >
                <span style="color:blueviolet;">二叔:</span>
                <span style="color:cornflowerblue;">整挺好整挺好整好整挺好整整挺好整挺好整挺好整好整挺好整整挺好整挺好整挺好整挺好整挺好整挺好</span>
                <span style="color:gray; float: right ;font-size: xx-small;">IP:河北省秦皇岛市</span>
               <HR  width="100%" color:gray SIZE=1></HR>
               <br>
                </p>   
                
                <p >
                <span style="color:blueviolet;">二叔:</span>
                <span style="color:cornflowerblue;">整挺好整挺好整好整挺好整整挺好整挺好整挺好整好整挺好整整挺好整挺好整挺好整挺好整挺好整挺好</span>
                <span style="color:gray; float: right ;font-size: xx-small;">IP:河北省秦皇岛市</span>
               <HR  width="100%" color:gray SIZE=1></HR>
               <br>
                </p> 
                
                <p >
                <span style="color:blueviolet;">二叔:</span>
                <span style="color:cornflowerblue;">整挺好整挺好整好整挺好整整挺好整挺好整挺好整好整挺好整整挺好整挺好整挺好整挺好整挺好整挺好</span>
                <span style="color:gray; float: right ;font-size: xx-small;">IP:河北省秦皇岛市</span>
               <HR  width="100%" color:gray SIZE=1></HR>
               <br>
                </p>
            </div>
           
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import sectionTitle from "@/components/section-title";
import { getTime, getTimeInterval } from "@/utils";
// import Quote from "@/components/quote";
import { propose } from "../api";
export default {
  name: "Message",
  data() {
    return {
      ruleForm: {
        mail: "",
        content: "",
        nickName: "",
      },

      list: [],
    };
  },
  components: {
    // Quote,
    sectionTitle,
  },
  methods: {
    update() {
      this.$router.go(0);
    },
    //提交表单
    submitForm(formName) {
      //_this.ruleForm获取表单数据
      const _this = this;
      console.log(this.ruleForm, "this.ruleForm");
      propose(this.ruleForm).then((res) => {
        alert(res.msg);
        this.update();
      });
    },
  },
  mounted() {},
};
</script>
<style scoped lang="less">
.about {
  padding-top: 40px;
}

.content-warp {
  margin-top: 80px;

  .about-info {
    margin: 30px 0;

    span {
      color: red;
      margin-right: 10px;
    }

    .info-card {
      min-height: 100px;
      padding: 20px;
      border-radius: 3px;
      margin: 30px 0 5px 0;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      p {
        line-height: 1.7rem;
      }
    }
  }
  .contactForm {
    width: 100%;
    padding: 20px;
    .form-item {
      align-items: center;
      display: flex;
      &:not(:last-child) {
        margin-bottom: 20px;
      }
      label {
        width: 80px;
      }
      .v {
        min-height: 40px;
        line-height: 20px;
        border-radius: 3px;
        padding: 2px 10px;
        outline: none;
        border: 1px solid #8fd0cc;
        width: 100%;
        resize: vertical;
      }

      .v_content {
        min-height: 40px;
        line-height: 35px;
        border-radius: 3px;
        padding: 2px 10px;
        outline: none;
        border: 1px solid #8fd0cc;
        width: 100%;
        color: #409eff;
        resize: vertical;
      }
      button {
        width: 100px;
        height: 40px;
        border-radius: 3px;
        outline: 0;
        border-style: none;
        cursor: pointer;
        background-color: #409eff;
        color: white;
        &:hover {
          opacity: 0.8;
        }
      }
    }
  }
}

/*******/
@media (max-width: 800px) {
  .content-warp {
    margin-top: 0;
  }
}
</style>
